<template>
  <div class="sendDialog">
    <el-dialog
      v-dialogDrag
      :before-close="handleBeforeClose"
      :visible.sync="sendDialogVisible"
      title="赠送商品"
      @close="handleClose"
      @open="handleOpen"
    >
      <el-form
        ref="sendForm"
        :model="form"
        :rules="rules"
        class="demo-ruleForm"
        label-width="200px"
      >
        <el-form-item label="商品名称">
          <el-input v-model="sendForm.product_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="展示图片">
          <img v-if="sendForm.picture" :src="sendForm.picture" class="avatar"/>
        </el-form-item>
        <el-form-item v-show="!is_suit" label="动态效果">
          <img
            v-if="/\.(png|jpg|gif|jpeg|webp)$/.test(sendForm.special)"
            :src="sendForm.special"
            class="avatar"
          />
          <video
            v-else-if="/\.mp4$/.test(sendForm.special)"
            src="sendForm.special"
          ></video>
          <el-select
            v-else-if="typeof sendForm.special === 'Number'"
            v-model="sendForm.special"
          >
            <el-option
              v-for="item in bubbleStyle"
              :key="'回声' + item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            v-else
            v-model="sendForm.special"
            :rows="3"
            disabled
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户ID" prop="user_code">
          <el-input
            v-model.number="form.user_code"
            placeholder="请输入用户ID"
          ></el-input>
        </el-form-item>
        <el-form-item label="赠送天数" prop="use_days">
          <el-radio v-model="form.use_days" :label="7"></el-radio>
          <el-radio v-model="form.use_days" :label="15"></el-radio>
          <el-radio v-model="form.use_days" :label="30"></el-radio>
        </el-form-item>
        <el-form-item label="自定义天数" prop="use_days">
          <el-input v-model="form.use_days"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="handleCloseSendDialog">
          取消
        </el-button>
        <el-button type="primary" @click="handleConfirmSend">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SendDialog',
  props: {
    sendDialogVisible: {
      type: Boolean,
      default: false
    },
    is_suit: {
      type: Boolean,
      default: false
    },
    sendForm: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      form: {
        id: undefined,
        user_code: undefined,
        use_days: 7
      },
      rules: {
        user_code: [
          { required: true, message: '请输入用户编号', trigger: 'blur' }
        ],
        use_days: [{ required: true, message: '请选择天数或自定义天数' }]
      },
      bubbleStyle: [
        { value: 1, label: '样式一' },
        { value: 2, label: '样式二' },
        { value: 3, label: '样式三' },
        { value: 4, label: '样式四' },
        { value: 5, label: '样式五' },
        { value: 6, label: '样式六' },
        { value: 7, label: '样式七' },
        { value: 8, label: '样式八' }
      ]
    }
  },
  methods: {
    // 组件打开时 将当前行id进行赋值
    handleOpen() {
      this.form.id = this.sendForm.id
    },
    handleConfirmSend() {
      this.$refs.sendForm.validate(valid => {
        if (valid) {
          this.$emit('sendForm', this.form)
        } else {

          return false
        }
      })
    },
    handleCloseSendDialog() {
      this.$emit('update:sendDialogVisible', false)
    },
    handleBeforeClose() {
      this.$emit('update:sendDialogVisible', false)
    },
    handleClose() {
      this.$refs.sendForm.resetFields()
      this.form = {
        id: undefined,
        user_code: undefined,
        use_days: 7
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  width   : 100px;
  height  : 100px;
  display : block;
}
</style>
